<template>
	<div class="api" v-if="tableData && tableData.length">
		<div class="left_nav">
			<el-tree :data="tableData" default-expand-all :props="defaultProps" @node-click="handleSelect"></el-tree>
		</div>
		<div class="right_detail" v-if="detail && detail.api">
			<div class="titles">{{detail.doc}}</div>
			<p>接口地址 <span>{{detail.api}}</span></p>
			<p>请求方式 <span>{{detail.method}}</span></p>
			<p>请求参数 </p>
			<el-table :data="detail.param" style="width:100%" row-key="id" border :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
			 :show-overflow-tooltip="true" size="mini">
				<el-table-column prop="name" label="参数名称" width="180" min-width="100px">
				</el-table-column>
				<el-table-column prop="doc" label="参数说明" min-width="400px">
				</el-table-column>
				<el-table-column prop="isrequired" label="是否必填" width="180" min-width="100px">
					<template slot-scope="scope">
						{{ scope.row.isrequired == 1 ? '是' : '否' }}
					</template>
				</el-table-column>
				<el-table-column prop="type" label="数据类型" width="180">
				</el-table-column>
			</el-table>
			<p>额外备注</p>
			<el-table :data="detail.marks" style="width:100%" row-key="id" border :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
				<el-table-column prop="name" label="参数名称" width="180">
				</el-table-column>
				<el-table-column prop="doc" label="参数说明" min-width="400">
				</el-table-column>
				<el-table-column prop="isrequired" label="是否必填" width="180">
				</el-table-column>
				<el-table-column prop="type" label="数据类型" width="180">
				</el-table-column>
			</el-table>
			<p>响应实例 </p>
			<div>{{detail.example}}</div>
			<div v-if="detail.model">
				<p>响应模型 </p>
				<div v-for="(items,keys) in detail.model">
					<p>{{keys}}</p>
					<el-table :data="items" style="width:100%" row-key="id" border :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
						<el-table-column prop="key" label="参数名称" width="180">
						</el-table-column>
						<el-table-column prop="name" label="参数说明" min-width="400">
						</el-table-column>
					</el-table>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
	import {request,writeLog} from "@/libs/core.js"
	export default {
		data() {
			return {
				defaultProps: {
          children: 'children',
          label: 'doc'
        },
				wheight: "100%",
				currentRow: 0,
				detail: null,
				tableData: []
			}
		},
		async created() {
			this.wheight = document.body.clientHeight + "px";
			await this.loadList();
		},
		methods: {
			async loadList(context) {
				try {
					const data = await request({
						url: '/apidoc',
						method: 'post'
					});
					if (data && data.code == 0) {
						this.tableData = data.list;
						this.detail = data.list[0].children[0].children[0];
					}
				} catch (e) {
					writeLog(0, e);
				}
			},
			handleSelect(datas, vnode, tree) {
				console.log(datas, vnode, tree);
				if(datas.children && datas.children.length > 0) {
					return;//非叶子节点
				}
				let model = {};
				if (datas.model) {
					for (let keys in datas.model) {
						if( Array.isArray(datas.model[keys])){
							model[keys] = datas.model[keys];
							continue;
						}
						model[keys] = [];
						for (let key in datas.model[keys]) {
							model[keys].push({
								key: key,
								name: datas.model[keys][key]
							})
						}
					}
					datas.model = model;
				}
				this.detail = datas;
			},
		},
	}
</script>
<style scoped>
	.api {
		display: flex;
		width: 100%;
		height: 100%;
	}

	.tableBox {
		width: 250px;
		height: 100%;
		cursor: pointer;
		background-color: #f5f5f5;
	}

	.tableBox th,
	.tableBox tr {
		background-color: #F5F5F5;
	}

	.left_nav {
		vertical-align: top;
		border-color: #F9f9f9;
		border-style:solid;
		border-width:1px;
		width: 258px;
		height: 100%;
		display: inline-block;
		overflow-x: hidden;
	}

	.right_detail {
		height: 100%;
		overflow-x: hidden;
		box-sizing: border-box;
		width: calc(100% - 265px);
		padding: 30px;
		vertical-align: top;
		display: inline-block;
	}

	.apiBox {
		display: inline-block;
	}

	.titles {
		font-size: 20px;
		padding: 0 0 10px;
		border-bottom: 1px dashed #000000;

	}

	p {
		margin: 10px 0;

	}
</style>
